<template>
  <view
    ref="wrapper"
    class="wrapper"
    :style="'height:' + WindowInfo.windowHeight + 'px'"
  >
    <!-- 头部 -->
    <view class="header-box">
      <u-navbar
        height="120rpx"
        safeAreaInsetTop
        placeholder
        bgColor="#FFFFFF"
        titleStyle="font-size: 16px; font-weight: 500; color: #000000;"
        class="navbar"
        @leftClick="backChat"
      >
        <view class="u-center-slot" slot="center">
          <view class="nav-title omit">{{
            formatUserName(targetUserInfo)
          }}</view>
          <view v-if="conversationType == 1">
            <view
              class="nav-system"
              v-show="typing && typing.indexOf(targetId) !== -1"
              >{{ $t("Typing") }}</view
            >
            <view v-show="typing && typing.indexOf(targetId) == -1">
              <view class="nav-system">{{
                getTimeDiff(
                  (targetUserInfo && targetUserInfo.lastLoginTime) ||
                    (targetUserInfo.userVo &&
                      targetUserInfo.userVo.lastLoginTime),
                  "minutes",
                  true,
                  -3
                )
              }}</view>
              <!-- <view class="nav-status">{{ $t("chat.Online") }}</view> -->
            </view>
          </view>
          <view class="nav-system" v-if="conversationType == 6"
            >{{ $t("chat.System-official-notification") }}
          </view>
        </view>
        <!-- 右侧图标  -->
        <view class="u-right-slot" slot="right" @click="handleDetail">
          <u-icon name="more-dot-fill"></u-icon>
        </view>
      </u-navbar>
    </view>
    <!-- 语音动画 -->
    <view class="record-content" v-if="recorderManagerOpen">
      <view class="seconds">{{ duration }}</view>
    </view>

    <!-- 中间聊天内容区域 -->
    <scroll-view
      class="chat-box"
      id="chat-box"
      :style="chatBoxStyle"
      scroll-y="true"
      :scroll-into-view="scrollIntoView"
      @scrolltoupper="scrollToUpper"
      @click="clickBlank"
    >
      <view style="width: 100%; height: 30rpx"></view>
      <view
        v-for="(item, index) in avatorIsShow"
        :key="item.messageUId"
        :id="`S-${item.messageUId}`"
      >
        <!-- 日期：月日  -->
        <view class="char-time" v-if="item.time">November 7</view>
        <!--     <view
          v-if="
            item.messageType != 'OL:ReadStatus' &&
            item.messageType != 'RC:RcCmd'
          "
        > -->
        <!-- 我发的信息 -->
        <view v-if="item.senderUserId == userId" @click="selectMsgHandle(item)">
          <view class="chat-line chat-right" :id="`index${index}`">
            <!-- 多选时出现的选择框 -->
            <view
              class="my-select-icon"
              v-if="selectShow && item.messageType !== 'OL:Prerender'"
            >
              <view
                class="unselect-icon"
                v-if="
                  selectShow && selectMsgIds.indexOf(item.messageUId) === -1
                "
              ></view>
              <i class="iconfont icon-duoxuan-xuanzhong select-icon" v-else></i>
            </view>
            <view class="chat-line__container" style="margin-right: -24rpx">
              <!-- 消息底部时间，以及发送状态 -->
              <!--              <view
                class="char-hour char-hour-right char-hour-success"
                v-if="item.messageType != 'RC:RcCmd'"
                style="margin: 0rpx 24rpx 10rpx 0rpx"
              >
                <view>
                  <text>{{ weChatTimeFormat(item.sentTime) }}</text>
                  <i
                    class="iconfont icon-yidu read-icon"
                    v-if="readTime && readTime >= item.sentTime && item.messageType !== 'OL:Prerender'"
                  ></i>
                  <i
                    class="iconfont icon-yidu icon-yifasong"
                    v-else-if="item.messageType !== 'OL:Prerender'"
                    style="margin-left: 6rpx"
                  ></i>
                </view>
              </view> -->

              <!-- 普通文本信息 -->
              <view
                class="connect-block-right"
                v-if="item.messageType == 'RC:TxtMsg'"
                @longpress="longTap(index, true, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <text
                  v-html="setLinkTextOpenToHtml(item.content.content)"
                ></text>
                <view class="time-msg time-file">
                  <text>{{ weChatTimeFormat(item.sentTime) }}</text>
                  <i
                    class="iconfont icon-yidu read-icon"
                    v-if="
                      readTime &&
                      readTime >= item.sentTime &&
                      item.messageType !== 'OL:Prerender'
                    "
                  ></i>
                  <i
                    class="iconfont icon-yidu icon-yifasong"
                    v-else-if="item.messageType !== 'OL:Prerender'"
                    style="margin-left: 6rpx"
                  ></i>
                </view>
              </view>
              <!-- 图片信息 -->
              <view
                v-else-if="item.messageType == 'RC:ImgMsg' && !item.expansion"
                class="char-pic"
                @longpress="longTap(index, true, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <image
                  class="char-pic"
                  :src="item.content.content"
                  style="margin: 0; border: unset"
                  @click="showPreview(item.content.imageUri)"
                  mode="aspectFill"
                ></image>
                <view class="time-msg time-pic">
                  {{ weChatTimeFormat(item.sentTime) }}
                  <i
                    class="iconfont icon-yidu read-icon"
                    v-if="
                      readTime &&
                      readTime >= item.sentTime &&
                      item.messageType !== 'OL:Prerender'
                    "
                  ></i>
                  <i
                    class="iconfont icon-yidu icon-yifasong"
                    v-else-if="item.messageType !== 'OL:Prerender'"
                    style="margin-left: 6rpx"
                  ></i>
                </view>
              </view>
              <!-- 图片带文字 -->
              <view
                class="connect-block-right"
                style="padding: 0px; overflow: hidden"
                v-else-if="item.messageType == 'RC:ImgMsg' && item.expansion"
                @longpress="longTap(index, true, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <view class="video-bg">
                  <image
                    :src="item.content.content"
                    mode="aspectFill"
                    class="char-pic"
                    style="border-radius: unset; border: unset; margin: unset"
                    @click="showPreview(item.content.imageUri)"
                  ></image>
                </view>
                <view
                  v-html="setLinkTextOpenToHtml(item.expansion.content)"
                  style="padding: 20upx 20upx 0"
                ></view>
                <view class="time-msg time-text-file">
                  <text>{{ weChatTimeFormat(item.sentTime) }}</text>
                  <i
                    class="iconfont icon-yidu read-icon"
                    v-if="
                      readTime &&
                      readTime >= item.sentTime &&
                      item.messageType !== 'OL:Prerender'
                    "
                  ></i>
                  <i
                    class="iconfont icon-yidu icon-yifasong"
                    v-else-if="item.messageType !== 'OL:Prerender'"
                    style="margin-left: 6rpx"
                  ></i>
                </view>
              </view>
              <!-- 视频信息 -->
              <view
                v-else-if="item.messageType == 'RC:SightMsg' && !item.expansion"
                style="
                  width: 300rpx;
                  height: 300rpx;
                  border-radius: 20rpx 0rpx 20rpx 20rpx;
                  overflow: hidden;
                  margin-right: 24rpx;
                  position: relative;
                "
                @longpress="longTap(index, true, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <j-video
                  :key="item.messageUId"
                  play-btn-position="center"
                  :danmu-btn="true"
                  :controls="false"
                  :url="item.content.sightUrl"
                  :poster="item.content.content"
                  style="width: 300rpx; height: 300rpx"
                />
                <!-- 视频左上角的视频时长 -->
                <view class="video-duration_top">
                  00:{{ item.content.duration }}
                  <img
                    src="@/static/image/chat/video-time.png"
                    class="video-icon"
                  />
                </view>
                <view class="time-msg time-pic">
                  {{ weChatTimeFormat(item.sentTime) }}
                  <i
                    class="iconfont icon-yidu read-icon"
                    v-if="
                      readTime &&
                      readTime >= item.sentTime &&
                      item.messageType !== 'OL:Prerender'
                    "
                  ></i>
                  <i
                    class="iconfont icon-yidu icon-yifasong"
                    v-else-if="item.messageType !== 'OL:Prerender'"
                    style="margin-left: 6rpx"
                  ></i>
                </view>
              </view>
              <!-- 视频带文字 -->
              <view
                class="connect-block-right"
                style="padding: 0px; overflow: hidden"
                v-else-if="item.messageType == 'RC:SightMsg' && item.expansion"
                @longpress="longTap(index, true, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <view class="video-bg">
                  <j-video
                    :key="item.messageUId"
                    play-btn-position="center"
                    :danmu-btn="true"
                    :controls="false"
                    :url="item.content.sightUrl"
                    :poster="item.content.content"
                    style="width: 300rpx; height: 300rpx"
                  />
                  <!-- 视频左上角的视频时长 -->
                  <view class="video-duration_top">
                    00:{{ item.content.duration }}
                    <img
                      src="@/static/image/chat/video-time.png"
                      class="video-icon"
                    />
                  </view>
                </view>
                <view
                  v-html="setLinkTextOpenToHtml(item.expansion.content)"
                  style="padding: 20upx 20upx 0"
                ></view>
                <view class="time-msg time-text-file">
                  <text>{{ weChatTimeFormat(item.sentTime) }}</text>
                  <i
                    class="iconfont icon-yidu read-icon"
                    v-if="
                      readTime &&
                      readTime >= item.sentTime &&
                      item.messageType !== 'OL:Prerender'
                    "
                  ></i>
                  <i
                    class="iconfont icon-yidu icon-yifasong"
                    v-else-if="item.messageType !== 'OL:Prerender'"
                    style="margin-left: 6rpx"
                  ></i>
                </view>
              </view>
              <!-- 通话信息 -->
              <view
                class="chart-call connect-block-right"
                :class="{
                  'error-color':
                    item.content.endReason == 12 || item.content.endReason == 2,
                }"
                v-else-if="item.messageType == 'OL:VoiceMsg'"
                @longpress="longTap(index, true, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
                @click="callMsgHandle(item)"
              >
                <i
                  class="iconfont call-my-icon"
                  :class="
                    item.content.mediaType == 1
                      ? 'icon-yuyintonghua1'
                      : 'icon-shipintonghua1'
                  "
                  :style="
                    item.content.endReason == 12 || item.content.endReason == 2
                      ? 'color: #FE6600'
                      : ''
                  "
                ></i>
                <!--  <image
                  class="call-my-icon"
                  :src="callIcon.myCall"
                  mode=""
                ></image> -->
                <view class="">
                  <text>{{
                    getCalledContent(
                      item.content.endReason,
                      item.content.duration
                    )
                  }}</text>

                  <view class="time-msg time-file">
                    <text>{{ weChatTimeFormat(item.sentTime) }}</text>
                    <i
                      class="iconfont icon-yidu read-icon"
                      v-if="
                        readTime &&
                        readTime >= item.sentTime &&
                        item.messageType !== 'OL:Prerender'
                      "
                    ></i>
                    <i
                      class="iconfont icon-yidu icon-yifasong"
                      v-else-if="item.messageType !== 'OL:Prerender'"
                      style="margin-left: 6rpx"
                    ></i>
                  </view>
                </view>
              </view>
              <!-- 语音信息 -->
              <view
                class="chart-voice connect-block-right"
                v-else-if="item.messageType == 'RC:HQVCMsg'"
                @tap="playVoice(item)"
                @longpress="longTap(index, true, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <view
                  class="progress-background"
                  :style="
                    item.content.progress
                      ? `width: ${item.content.progress}%`
                      : 'width: 0;opacity: 0'
                  "
                ></view>
                <view
                  class="iconfont icon-bofang voice-icon voice-icon-shadow"
                  v-show="!item.content.progress"
                ></view>
                <image
                  src="@/static/image/chart/play-right.png"
                  class="play-right"
                  v-show="item.content.progress"
                  @tap.stop="playStop"
                />
                <view class="iconfont icon-jindutiao progress-icon"></view>
                <text>{{ item.content.duration }}''</text>

                <text class="time-msg time-voice">
                  {{ weChatTimeFormat(item.sentTime) }}
                  <i
                    class="iconfont icon-yidu read-icon"
                    v-if="
                      readTime &&
                      readTime >= item.sentTime &&
                      item.messageType !== 'OL:Prerender'
                    "
                  ></i>
                  <i
                    class="iconfont icon-yidu icon-yifasong"
                    v-else-if="item.messageType !== 'OL:Prerender'"
                    style="margin-left: 6rpx"
                  ></i>
                </text>
              </view>
              <!-- 文件信息 -->
              <view
                class="connect-block-right"
                style="padding: 20upx"
                v-else-if="item.messageType == 'RC:FileMsg'"
                @longpress="longTap(index, true, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <view
                  class="chart-call"
                  style="padding: 0upx"
                  @click="handleSeeFiles(item)"
                >
                  <view class="file-type-cicle">
                    <image
                      src="@/static/image/chart/file_my.png"
                      class="file-type-image"
                    ></image>
                    <view class="file-type-keyword">{{
                      identifyFileType(item.content.name)
                        .slice(0, 1)
                        .toUpperCase()
                    }}</view>
                  </view>
                  <view class="chart-file-container">
                    <view class="file-content">
                      <text>{{ item.content.name }}</text>
                    </view>
                    <text class="file-size">{{
                      getSize(item.content.size)
                    }}</text>
                  </view>
                </view>
                <view
                  v-html="setLinkTextOpenToHtml(item.expansion.content)"
                  v-if="item.expansion && item.expansion.content"
                  style="margin-top: 20upx"
                ></view>
                <view class="time-msg time-text-file_2">
                  {{ weChatTimeFormat(item.sentTime) }}
                  <i
                    class="iconfont icon-yidu read-icon"
                    v-if="
                      readTime &&
                      readTime >= item.sentTime &&
                      item.messageType !== 'OL:Prerender'
                    "
                  ></i>
                  <i
                    class="iconfont icon-yidu icon-yifasong"
                    v-else-if="item.messageType !== 'OL:Prerender'"
                    style="margin-left: 6rpx"
                  ></i>
                </view>
              </view>
              <!-- 转账信息 -->
              <view
                class="chart-transfer"
                :style="item.content.state == 1 ? 'opacity: 0.7' : ''"
                v-else-if="item.type == 'transfer'"
                @longpress="longTap(index, true, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <view class="chart-transfer__top">
                  <view
                    class="iconfont my-icon"
                    :class="
                      item.content.state == 1
                        ? 'icon-queren'
                        : 'icon-zhuanzhang'
                    "
                  ></view>
                  <view class="chart-transfer__top__container">
                    <view>${{ item.content.money }}</view>
                    <view>{{
                      item.content.state == 1
                        ? "Received"
                        : "You initiated a transfer"
                    }}</view>
                  </view>
                </view>
                <view class="chart-transfer__bottom"> Transfer </view>
              </view>
              <!-- 撤回 -->
              <view
                v-else-if="item.messageType == 'RC:RcCmd'"
                class="recall-message"
              ></view>
              <!-- 名片 -->
              <view
                v-else-if="item.messageType == 'OL:Card'"
                class="msgs-classic card-box"
                @click="toShowCardMsg(item.content.info)"
                @longpress="longTap(index, true, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <view class="card-content">
                  <image
                    :src="
                      item.content.info.avatarCompress ||
                      item.content.info.avatar
                    "
                    v-if="
                      isPeopleAvatarExit(
                        item.content.info.avatarCompress ||
                          item.content.info.avatar
                      )
                    "
                    alt=""
                    class="card-img"
                    mode="aspectFill"
                  />
                  <view
                    v-else
                    class="card-img avator-font-setting"
                    :style="{
                      background: `${getDefaultColor(
                        item.content.info.avatarColorCode
                      )}`,
                      fontSize: '30upx',
                      fontWeight: '400',
                    }"
                  >
                    {{ formatUserName(item.content.info).slice(0, 1) }}
                  </view>
                  <view class="card-name omit">{{
                    formatUserName(item.content.info)
                  }}</view>
                </view>

                <view class="card-bottom">
                  {{ $t("contacts.contact") }}
                  <view class="time-msg time-card">
                    {{ weChatTimeFormat(item.sentTime) }}
                    <i
                      class="iconfont icon-yidu read-icon"
                      v-if="
                        readTime &&
                        readTime >= item.sentTime &&
                        item.messageType !== 'OL:Prerender'
                      "
                    ></i>
                    <i
                      class="iconfont icon-yidu icon-yifasong"
                      v-else-if="item.messageType !== 'OL:Prerender'"
                      style="margin-left: 6rpx"
                    ></i>
                  </view>
                </view>
              </view>
              <!-- 新的-自定义-充值提现名片 -->
              <view
                v-else-if="item.messageType == 's:exchangeCard'"
                class="msgs-classic card-box"
                @longpress="longTap(index, true, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <view class="s-card">
                  <view class="text_1">充值/提现</view>
                  <view class="text_2">21.2RUB</view>
                </view>

                <view class="card-bottom" style="height: 36rpx">
                  <view class="time-msg time-card">
                    {{ weChatTimeFormat(item.sentTime) }}
                    <i
                      class="iconfont icon-yidu read-icon"
                      v-if="
                        readTime &&
                        readTime >= item.sentTime &&
                        item.messageType !== 'OL:Prerender'
                      "
                    ></i>
                    <i
                      class="iconfont icon-yidu icon-yifasong"
                      v-else-if="item.messageType !== 'OL:Prerender'"
                      style="margin-left: 6rpx"
                    ></i>
                  </view>
                </view>
              </view>
              <!-- 新的-自定义-悬赏 -->
              <view
                v-else-if="item.messageType == 's:rewardCard'"
                class="msgs-classic card-box"
                @longpress="longTap(index, true, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
                @click="goReward(item)"
              >
                <view class="s-card">
                  <view class="text_1">悬赏任务</view>
                  <view class="text_2">{{ item.content.title }}</view>
                </view>

                <view class="card-bottom" style="height: 36rpx">
                  <view class="time-msg time-card">
                    {{ weChatTimeFormat(item.sentTime) }}
                    <i
                      class="iconfont icon-yidu read-icon"
                      v-if="
                        readTime &&
                        readTime >= item.sentTime &&
                        item.messageType !== 'OL:Prerender'
                      "
                    ></i>
                    <i
                      class="iconfont icon-yidu icon-yifasong"
                      v-else-if="item.messageType !== 'OL:Prerender'"
                      style="margin-left: 6rpx"
                    ></i>
                  </view>
                </view>
              </view>
              <!-- 回复消息 -->
              <view
                class="msgs-classic card-box"
                @contextmenu.prevent="onContextmenu($event, item)"
                v-if="item.messageType == 'OL:Recall'"
                @click="toFindPosition(item.content.recallMsg)"
                @longpress="longTap(index, true, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <RecallMsgBox
                  :msgInfo="item.content.recallMsg"
                  type="my"
                ></RecallMsgBox>
                <view
                  class="card-bottom"
                  style="font-size: 28rpx; color: #ffffff; padding-top: 0rpx"
                >
                  <text
                    v-html="setLinkTextOpenToHtml(item.content.content)"
                  ></text>
                  <text class="time-msg time-recall">
                    {{ weChatTimeFormat(item.sentTime) }}
                    <i
                      class="iconfont icon-yidu read-icon"
                      v-if="
                        readTime &&
                        readTime >= item.sentTime &&
                        item.messageType !== 'OL:Prerender'
                      "
                    ></i>
                    <i
                      class="iconfont icon-yidu icon-yifasong"
                      v-else-if="item.messageType !== 'OL:Prerender'"
                      style="margin-left: 6rpx"
                    ></i>
                  </text>
                </view>
              </view>
              <view
                v-else-if="item.messageType == 'OL:Prerender'"
                @contextmenu.prevent="onContextmenu($event, item)"
                @longpress="longTap(index, true, item)"
              >
                <preRenderShow :fileObj="item"></preRenderShow>
              </view>
            </view>
            <!-- 头像 -->
            <!-- <image
                :src="userInfo.avatar"
                class="avatar"
                v-if="item.messageType != 'RC:RcCmd'"
                mode="aspectFill"
              ></image> -->
          </view>
        </view>

        <!-- 对方发的信息 -->
        <view v-else @click="selectMsgHandle(item)">
          <view class="chat-line" :id="`index${index}`">
            <!-- 多选时出现的选择框 -->
            <view class="my-select-icon" v-if="selectShow">
              <view
                class="unselect-icon"
                v-if="
                  selectShow && selectMsgIds.indexOf(item.messageUId) === -1
                "
              ></view>
              <i class="iconfont icon-duoxuan-xuanzhong select-icon" v-else></i>
            </view>
            <!-- 头像 -->
            <view
              class="avatar avator-font-setting"
              @click="handleDetail"
              :style="{
                background: `${getDefaultColor(
                  targetUserInfo.userVo.avatarColorCode
                )}`,
                fontSize: '30upx',
                fontWeight: '400',
              }"
              v-if="
                !isPeopleAvatarExit(
                  targetUserInfo &&
                    (targetUserInfo.avatarCompress || targetUserInfo.avatar)
                ) &&
                item.showAvatorNow &&
                conversationType != 6
              "
            >
              {{ (formatUserName(targetUserInfo) || "").slice(0, 1) }}
            </view>
            <image
              :src="
                targetUserInfo &&
                (targetUserInfo.avatarCompress || targetUserInfo.avatar)
              "
              class="avatar"
              mode="aspectFill"
              v-else-if="item.showAvatorNow && conversationType != 6"
              @click="handleDetail"
            ></image>
            <view class="avatar" v-else-if="conversationType != 6"></view>
            <view class="chat-line__container">
              <!-- 群聊用户姓名 -->
              <!--           <view
                class="chat-line__container__name"
                v-if="item.showAvatorNow"
              >
                <view class="omit">{{ formatUserName(targetUserInfo) }}</view>
                <view class="char-hour" style="margin: 0rpx 0rpx 0rpx 20rpx">
                  {{ weChatTimeFormat(item.sentTime) }}
                </view>
              </view> -->
              <!-- 普通文本信息 -->
              <view
                class="connect-block-left"
                v-if="item.messageType == 'RC:TxtMsg'"
                @longpress="longTap(index, false, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <text
                  v-html="setLinkTextOpenToHtml(item.content.content)"
                ></text>
                <text class="time-msg time-file">{{
                  weChatTimeFormat(item.sentTime)
                }}</text>
              </view>
              <!-- 图片信息 -->
              <view
                v-else-if="item.messageType == 'RC:ImgMsg' && !item.expansion"
                class="char-pic char-pic-left"
                @longpress="longTap(index, false, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <image
                  :src="item.content.content"
                  mode="aspectFill"
                  class="char-pic char-pic-left"
                  style="margin: 0; border: unset"
                  @click="showPreview(item.content.imageUri)"
                ></image>
                <view class="time-msg time-pic">{{
                  weChatTimeFormat(item.sentTime)
                }}</view>
              </view>
              <!-- 图片带文字 -->
              <view
                class="connect-block-left"
                style="padding: 0px; overflow: hidden"
                v-else-if="item.messageType == 'RC:ImgMsg' && item.expansion"
                @longpress="longTap(index, false, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <view class="video-bg">
                  <image
                    :src="item.content.content"
                    mode="aspectFill"
                    class="char-pic"
                    style="border-radius: unset; border: unset; margin: unset"
                    @click="showPreview(item.content.imageUri)"
                  ></image>
                </view>
                <view
                  v-html="setLinkTextOpenToHtml(item.expansion.content)"
                  style="padding: 20upx 20upx 0upx"
                ></view>

                <view class="time-msg time-text-file">{{
                  weChatTimeFormat(item.sentTime)
                }}</view>
              </view>

              <!-- 视频信息 -->
              <view
                v-else-if="item.messageType == 'RC:SightMsg' && !item.expansion"
                style="
                  width: 300rpx;
                  height: 300rpx;
                  border-radius: 0rpx 20rpx 20rpx 20rpx;
                  overflow: hidden;
                  margin-left: 24rpx;
                  position: relative;
                "
                @longpress="longTap(index, false, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <j-video
                  :key="item.messageUId"
                  play-btn-position="center"
                  :danmu-btn="true"
                  :controls="false"
                  :url="item.content.sightUrl"
                  :poster="item.content.content"
                  style="width: 300rpx; height: 300rpx"
                />
                <!-- 视频左上角的视频时长 -->
                <view class="video-duration_top">
                  00:{{ item.content.duration }}
                  <img
                    src="@/static/image/chat/video-time.png"
                    class="video-icon"
                  />
                </view>
                <view class="time-msg time-pic">{{
                  weChatTimeFormat(item.sentTime)
                }}</view>
              </view>
              <!-- 视频带文字 -->
              <view
                class="connect-block-left"
                style="padding: 0px; overflow: hidden"
                v-else-if="item.messageType == 'RC:SightMsg' && item.expansion"
                @longpress="longTap(index, false, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <view class="video-bg">
                  <j-video
                    :key="item.messageUId"
                    play-btn-position="center"
                    :danmu-btn="true"
                    :controls="false"
                    :url="item.content.sightUrl"
                    :poster="item.content.content"
                    style="width: 300rpx; height: 300rpx"
                  />
                  <!-- 视频左上角的视频时长 -->
                  <view class="video-duration_top">
                    00:{{ item.content.duration }}
                    <img
                      src="@/static/image/chat/video-time.png"
                      class="video-icon"
                    />
                  </view>
                </view>
                <view
                  v-html="setLinkTextOpenToHtml(item.expansion.content)"
                  style="padding: 20upx 20upx 0upx"
                ></view>
                <view class="time-msg time-text-file">{{
                  weChatTimeFormat(item.sentTime)
                }}</view>
              </view>
              <!-- 通话信息 -->
              <view
                class="chart-call connect-block-left"
                :class="{
                  'error-color':
                    item.content.endReason == 12 || item.content.endReason == 2,
                }"
                v-else-if="item.messageType == 'OL:VoiceMsg'"
                @longpress="longTap(index, false, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
                @click="callMsgHandle(item)"
              >
                <i
                  class="iconfont call-my-icon"
                  :class="
                    item.content.mediaType == 1
                      ? 'icon-yuyintonghua1'
                      : 'icon-shipintonghua1'
                  "
                  :style="
                    item.content.endReason == 12 || item.content.endReason == 2
                      ? 'color: #FE6600'
                      : 'color: #61BDB2'
                  "
                ></i>
                <!--         <image
                  class="call-my-icon"
                  :src="
                    item.content.callState == 0
                      ? callIcon.errorCall
                      : callIcon.successCall
                  "
                  mode=""
                >
                </image> -->
                <view class="">
                  <text>{{
                    getCalledContent(
                      item.content.endReason,
                      item.content.duration
                    )
                  }}</text>

                  <view class="time-msg time-file">
                    <text>{{ weChatTimeFormat(item.sentTime) }}</text>
                  </view>
                </view>
              </view>
              <!-- 语音信息 -->
              <view
                class="chart-voice connect-block-left chart-voice-left"
                v-else-if="item.messageType == 'RC:HQVCMsg'"
                @tap="playVoice(item)"
                @longpress="longTap(index, false, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <view
                  class="progress-background"
                  :style="
                    item.content.progress
                      ? `width: ${item.content.progress}%`
                      : 'width: 0;opacity: 0'
                  "
                ></view>
                <view class="video-back-box">
                  <view
                    class="iconfont icon-bofang voice-icon"
                    v-show="!item.content.progress"
                  >
                  </view>
                  <!-- <view class="iconfont icon-a-tingzhibofang_huaban1  voice-icon " v-else></view> -->
                  <image
                    src="@/static/image/chart/play-left.png"
                    class="play-right"
                    v-show="item.content.progress"
                  />
                </view>
                <view class="iconfont icon-jindutiao progress-icon"></view>
                <text>{{ item.content.duration }}''</text>
                <text class="time-msg time-voice">{{
                  weChatTimeFormat(item.sentTime)
                }}</text>
              </view>
              <!-- 文件信息 -->
              <view
                class="connect-block-left file-left"
                style="padding: 20upx 20upx 0upx"
                v-else-if="item.messageType == 'RC:FileMsg'"
                @longpress="longTap(index, false, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <view
                  class="chart-call"
                  style="padding: 0upx"
                  @click="handleSeeFiles(item)"
                >
                  <view class="file-type-cicle">
                    <image
                      src="@/static/image/chart/file_side.png"
                      class="file-type-image"
                    ></image>
                    <view class="file-type-keyword">{{
                      identifyFileType(item.content.name)
                        .slice(0, 1)
                        .toUpperCase()
                    }}</view>
                  </view>
                  <view class="chart-file-container">
                    <view class="file-content">
                      <text>{{ item.content.name }}</text>
                    </view>
                    <text class="file-size file-size-left">{{
                      getSize(item.content.size)
                    }}</text>
                  </view>
                </view>
                <view
                  v-html="setLinkTextOpenToHtml(item.expansion.content)"
                  v-if="item.expansion && item.expansion.content"
                  style="margin-top: 20upx; color: rgba(0, 0, 0, 0.8)"
                >
                </view>
                <view class="time-msg time-text-file_2">{{
                  weChatTimeFormat(item.sentTime)
                }}</view>
              </view>
              <!-- 转账信息 -->
              <view
                class="chart-transfer chart-transfer-left"
                :style="item.content.state == 1 ? 'opacity: 0.7' : ''"
                v-else-if="item.type == 'transfer'"
                @longpress="longTap(index, false, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <view class="chart-transfer__top">
                  <view
                    class="iconfont my-icon"
                    :class="
                      item.content.state == 1
                        ? 'icon-queren'
                        : 'icon-zhuanzhang'
                    "
                  ></view>
                  <view class="chart-transfer__top__container">
                    <view>${{ item.content.money }}</view>
                    <view>{{
                      item.content.state == 1 ? "Paid" : "Please collect"
                    }}</view>
                  </view>
                </view>
                <view class="chart-transfer__bottom"> Transfer </view>
              </view>
              <!-- 撤回 -->
              <view
                v-else-if="item.messageType == 'RC:RcCmd'"
                class="recall-message"
                style="margin-left: 90upx"
              ></view>
              <!-- 名片 -->
              <view
                v-else-if="item.messageType == 'OL:Card'"
                class="msgs-classic card-box card-left"
                @click="toShowCardMsg(item.content.info)"
                @longpress="longTap(index, false, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <view
                  class="card-content"
                  style="border-bottom: 2rpx solid rgba(0, 0, 0, 0.05)"
                >
                  <image
                    :src="
                      item.content.info.avatarCompress ||
                      item.content.info.avatar
                    "
                    v-if="
                      isPeopleAvatarExit(
                        item.content.info.avatarCompress ||
                          item.content.info.avatar
                      )
                    "
                    alt=""
                    class="card-img"
                    mode="aspectFill"
                  />
                  <view
                    v-else
                    class="card-img avator-font-setting"
                    :style="{
                      background: `${getDefaultColor(
                        item.content.info.avatarColorCode
                      )}`,
                      fontSize: '30upx',
                      fontWeight: '400',
                    }"
                  >
                    {{ formatUserName(item.content.info).slice(0, 1) }}
                  </view>
                  <view class="card-name omit" style="color: #000000">{{
                    formatUserName(item.content.info)
                  }}</view>
                </view>

                <view class="card-bottom" style="color: rgba(0, 0, 0, 0.3)">
                  {{ $t("contacts.contact") }}
                  <view class="time-msg time-card">{{
                    weChatTimeFormat(item.sentTime)
                  }}</view>
                </view>
              </view>
              <!-- 回复消息 -->
              <view
                class="msgs-classic card-box card-left"
                @contextmenu.prevent="onContextmenu($event, item)"
                v-if="item.messageType == 'OL:Recall'"
                @click="toFindPosition(item.content.recallMsg)"
                @longpress="longTap(index, false, item)"
                @touchend="touchEnd"
                @touchmove="touchMove"
              >
                <RecallMsgBox :msgInfo="item.content.recallMsg"></RecallMsgBox>
                <view
                  class="card-bottom"
                  style="
                    font-size: 28rpx;
                    color: rgba(0, 0, 0, 0.8);
                    padding-top: 0rpx;
                  "
                >
                  <text
                    v-html="setLinkTextOpenToHtml(item.content.content)"
                  ></text>
                  <text class="time-msg time-recall">{{
                    weChatTimeFormat(item.sentTime)
                  }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- </view> -->
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view
      class="bottom-box"
      :style="{ position: 'relative', bottom: keyHeight + 'px' }"
      v-if="conversationType != 6"
    >
      <view class="disabled-mask" v-show="targetUserInfo.isOppositeBlockUser">
      </view>
      <view class="input-line" v-show="!selectShow">
        <!-- 语音播放按钮 -->
        <view
          class="iconfont icon-yuyin bottom-icon"
          @click="changeRecord(true)"
          v-if="!isRecord"
        ></view>
        <view
          class="iconfont icon-jianpan bottom-icon"
          @click="changeRecord(false)"
          v-if="isRecord"
        ></view>

        <textarea
          auto-height
          v-if="!isRecord"
          ref="scanTextbox"
          :cursor="blurIndex"
          :focus="isInputFocus"
          @focus="typingInputFocus"
          @blur="typingInputBlur"
          @click="clickInput"
          :placeholder="
            targetUserInfo.isOppositeBlockUser
              ? $t('chat.black-tip')
              : $t('chat.Message')
          "
          class="message-input ml-10 mr-l0"
          placeholder-class="placeholderClass"
          :confirm-hold="true"
          @confirm="handleSendMessage"
          v-model="messageContent"
          :adjust-position="false"
          maxlength="-1"
          @keydown.native="_sendTypingStatusMessage(1, targetId)"
        />
        <view
          class="message-input ml-10 mr-l0 record-box"
          v-if="isRecord"
          @touchstart.prevent="startRecord"
          @touchend.prevent="overRecord"
          @touchcancel.prevent="overRecord"
        >
          {{
            recorderManagerOpen
              ? $t("chat.Release-send")
              : $t("chat.Hold-speak")
          }}
        </view>
        <view
          class="iconfont icon-gengduo1 bottom-icon"
          @click="changeBottomType('tools')"
          v-if="messageContent.length < 1"
        ></view>
        <image
          class="send-icon"
          :src="require('@/static/image/chat/send.png')"
          v-else
          @touchend.prevent="handleSendMessage"
        ></image>
        <view
          class="iconfont icon-emoji bottom-icon emoji-icon-ab"
          @click.stop="changeBottomType('emoji')"
          v-if="!isRecord && inputBottomType != 'emoji'"
        ></view>
        <view
          class="iconfont icon-jianpan bottom-icon emoji-icon-ab"
          @click="changeRecord(false)"
          v-if="!isRecord && inputBottomType == 'emoji'"
        ></view>
      </view>
      <!-- 多选操作 -->
      <MultipleSelection
        :disabled="selectMsgIds.length === 0"
        :show.sync="selectShow"
        @onMultipleDelete="onMultipleDelete"
        @onMultipleForward="onMultipleForward"
      ></MultipleSelection>

      <!-- 回复样式 -->
      <RecallBox
        :msgInfo="recallMsgInfo"
        :show.sync="recallBoxShow"
        v-show="recallBoxShow && !selectShow"
      >
      </RecallBox>

      <u-transition
        :show="
          (inputBottomType == 'tools' || inputBottomType == 'emoji') &&
          !selectShow
        "
        mode="slide-up"
        duration="160"
      >
        <!-- 表情 -->
        <EmojiMenu
          :show="inputBottomType == 'emoji' && !selectShow"
          @select="selectEmoji"
        ></EmojiMenu>
        <!-- 工具栏 -->
        <view
          class="input-tools"
          v-show="inputBottomType == 'tools' && !selectShow"
        >
          <view
            class="input-tools__item"
            v-for="item in tools"
            :key="item.type"
            @click="clickToolHandle(item)"
          >
            <view v-if="item.type == 'Photo'">
              <u-upload
                @afterRead="afterRead"
                @delete="deletePic"
                name="1"
                multiple
                :maxCount="1"
                width="250"
                height="150"
              >
                <view class="input-tools__item__top">
                  <view class="iconfont tool-icon" :class="item.src"></view>
                </view>
                <view class="input-tools__item__bottom">
                  {{ item.name }}
                </view>
              </u-upload>
            </view>
            <view v-else-if="item.type == 'File'">
              <lsj-upload
                ref="lsjUpload"
                childId="upload1"
                width="100%"
                height="100%"
                :option="option"
                :size="20"
                :instantly="false"
                @progress="onProgress"
                @change="onChange"
                @uploadEnd="uploadFilesEnd"
                :count="9"
              >
                <view class="input-tools__item__top">
                  <view class="iconfont tool-icon" :class="item.src"></view>
                </view>
                <view class="input-tools__item__bottom">
                  {{ item.name }}
                </view>
              </lsj-upload>
            </view>
            <view v-else>
              <view class="input-tools__item__top">
                <view class="iconfont tool-icon" :class="item.src"></view>
              </view>
              <view class="input-tools__item__bottom">
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>
      </u-transition>
    </view>

    <yinrh-menu-popup
      v-model="popupShow"
      :pop-data="menu"
      :x="x"
      :y="y"
      direction="column"
      theme="dark"
      :placement="place"
      @tapPopup="tapPopup"
      :returnData="longTapData"
      @delete="handleDelete"
      :width="popupWidth"
      :height="popupHeight + 'rpx'"
      :userId="userId"
      :deleteType="deleteType"
    />

    <!-- #ifdef H5 -->
    <recorder
      v-if="conversationType != 6"
      ref="recorderCom"
      @error="recorderError"
      @success="recorderSuccess"
      @start="recorderStart"
    ></recorder>
    <!-- #endif -->
  </view>
</template>

<script>
/**录音*/
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
import { weChatTimeFormat } from "@/utils/common";
import moment from "moment";
import store from "@/store/index";
import {
  getUserInfo,
  getTimeDiff,
  getTargetUserInfo,
  updateOlUsersInfo,
  getDefaultColor,
} from "@/utils/index";
import { queryMessageCollectAdd } from "@/services/chat";
import {
  getHistoryMessages,
  clearMessageUnreadStatus,
  getRongHistoryMessages,
} from "@/utils/RongIM";
import yinrhMenuPopup from "@/uni_modules/yinrh-menu-popup/components/yinrh-menu-popup/yinrh-menu-popup.vue";
import { mapState, mapMutations } from "vuex";
import config from "@/config/app.config";
import JVideo from "@/uni_modules/j-video/components/j-video/j-video.vue";
import RecallBox from "./components/RecallBox";
import RecallMsgBox from "./components/RecallMsgBox";
import preRenderShow from "./components/preRenderShow";
import { debounce } from "@/utils/util.js";
import atMixin from "@/utils/atMixin.js";
import mixin from "./mixin/index";
// 引入表情组件、
import EmojiMenu from "./components/EmojiMenu";
// 引入H5录音组件
import recorder from "@/components/recorder.vue";
// 引入多选框组件
import MultipleSelection from "./components/MultipleSelection";
import {
  voiceCallRequest,
  videoCallRequest,
  downloadWebViewFlie,
} from "@/utils/olImInterface.js";

// 引入图片预览组件
import { PreviewImage } from "@/components/PreviewImage/index.js";

export default {
  mixins: [mixin, atMixin],
  name: "PersonalChat",
  data() {
    return {
      recallBoxShow: false, // 回复box显示与隐藏
      recallMsgInfo: {},
      currentRightClickInfo: {}, // 当前点击右键菜单的对象信息
      keyHeight: 0,
      commentName: "",
      friendId: "",
      imageValue: [],
      weChatTimeFormat,
      bofang: "",
      fileList1: [],
      awaitSendFile: [],
      fileList2: [],
      timer: "",
      duration: "",
      voicePath: "",
      startTime: "",
      recorderManagerOpen: false,
      popupShow: false,
      x: 0,
      y: 0,
      place: "",
      popupWidth: "212rpx",
      popupHeight: 482,
      // 通话图标
      callIcon: {
        myCall: require("@/static/image/chart/call_my.png"),
        errorCall: require("@/static/image/chart/call_error.png"),
        successCall: require("@/static/image/chart/call_success.png"),
      },
      messageContent: "",
      targetId: "",
      chatList: [], // 会话列表
      scrollTop: 0,
      // 底部消息栏显示类型
      inputBottomType: "none",
      targetUserInfo: {}, // 目标用户信息
      longTapData: {},
      scrollIntoView: "",
      formData: {
        sendUserId: "",
        sendName: "",
        sendTime: "",
        sendSite: "0",
        sendSiteId: 1,
        context: "",
        messageType: "",
        remark: "",
      },
      selectShow: false,
      conversationType: 1,
      backType: null,
      // 0 不设置 1 只为我删除 2 撤回
      deleteType: 0,
    };
  },
  components: {
    yinrhMenuPopup,
    JVideo,
    RecallBox,
    RecallMsgBox,
    EmojiMenu,
    MultipleSelection,
    recorder,
    preRenderShow,
  },
  computed: {
    ...mapState([
      "connectStatus",
      "userId",
      "userInfo",
      "roomBaseInfo",
      "receiveMessage",
      "privateChatInfo",
      "token",
      "friendsList",
      "typing",
      "rongToken",
      "isWebview",
    ]),
    option() {
      return {
        // 上传服务器地址，此地址需要替换为你的接口地址
        url: config.server + "/app/oss/upload",
        // 上传附件的key
        name: "file",
        header: {
          Authorization: `Bearer ${this.token}`,
          version: config.version,
        },
      };
    },
    menu() {
      this.deleteType = 0;
      if (this.longTapData && Object.keys(this.longTapData).length !== 0) {
        const arr = [];
        switch (this.longTapData.messageType) {
          case "OL:Prerender":
            this.deleteType = 2;
            break;
          // eslint-disable-next-line no-fallthrough
          case "OL:Recall":
          case "RC:TxtMsg":
            arr.push({
              icon: "iconfont icon-fuzhi",
              title: this.$t("contacts.Copy"),
              type: "Copy",
            });
          // eslint-disable-next-line no-fallthrough
          case "RC:ImgMsg":
          case "RC:SightMsg":
          case "RC:HQVCMsg":
          case "RC:FileMsg":
            arr.unshift({
              icon: "iconfont icon-huifu",
              title: this.$t("contacts.Reply"),
              type: "Reply",
            });
            arr.push(
              {
                icon: "iconfont icon-shoucang",
                title: this.$t("contacts.Collect"),
                type: "Collect",
              },
              {
                icon: "iconfont icon-xuanze",
                title: this.$t("contacts.Select"),
                type: "Select",
              }
            );
          // eslint-disable-next-line no-fallthrough
          case "OL:Card":
            arr.splice(2, 0, {
              icon: "iconfont icon-zhuanfa",
              title: this.$t("contacts.Forward"),
              type: "Forward",
            });
          case "s:exchangeCard":
          case "s:rewardCard":
          // arr.splice(3, 0, {
          //   icon: "iconfont icon-zhuanfa",
          //   title: this.$t("contacts.Forward"),
          //   type: "Forward",
          // });
          // eslint-disable-next-line no-fallthrough
          case "call":
          case "transfer":
            if (arr.length <= 1) {
              arr.push({
                icon: "iconfont icon-shanchu",
                title: this.$t("contacts.delete"),
                type: "Delete",
                color: "#FE6600",
              });
            } else {
              arr.splice(-1, 0, {
                icon: "iconfont icon-shanchu",
                title: this.$t("contacts.delete"),
                type: "Delete",
                color: "#FE6600",
              });
            }
        }
        // this.popupHeight = arr.length < 2 ? 160 : arr.length * 80;
        this.popupHeight = arr.length * 80;
        return arr;
      }
    },
    // 工具栏
    tools() {
      if (this.isWebview) {
        return [
          {
            name: this.$t("chat.Photo"),
            src: "icon-tupian",
            type: "Photo",
          },
          {
            name: this.$t("chat.Video"),
            src: "icon-bofang",
            type: "VideoFile",
          },
          {
            name: this.$t("chat.call"),
            src: "icon-yuyintonghua",
            type: "Call",
          },
          {
            name: this.$t("chat.VideoCall"),
            src: "icon-shipintonghua",
            type: "Video",
          },
          // {
          //   name: this.$t('chat.Location'),
          //   src: "icon-weizhi",
          //   type: "Location",
          // },
          // {
          //   name: this.$t('chat.Red-Packet'),
          //   src: "icon-hongbao",
          //   type: "RedPacket",
          // },
          // {
          //   name: this.$t("chat.Transfer"),
          //   src: "icon-zhuanzhang1",
          //   type: "Transfer",
          // },
          {
            name: this.$t("chat.File"),
            src: "icon-wenjian3",
            type: "File",
          },
          {
            name: this.$t("chat.Contact"),
            src: "icon-mingpian",
            type: "Contact",
          },
        ];
      } else {
        return [
          {
            name: this.$t("chat.Photo"),
            src: "icon-tupian",
            type: "Photo",
          },
          {
            name: this.$t("chat.Video"),
            src: "icon-bofang",
            type: "VideoFile",
          },
          {
            name: this.$t("chat.File"),
            src: "icon-wenjian3",
            type: "File",
          },
          {
            name: this.$t("chat.Contact"),
            src: "icon-mingpian",
            type: "Contact",
          },
        ];
      }
    },
  },
  watch: {
    typing: {
      handler(newVal, oldVal) {
        if (newVal.length > 0) {
          this.REST_TYPING();
        }
      },
      deep: true,
    },
    connectStatus(val) {
      if (val === 2) {
        this.getHistoryMessages();
      }
    },
    privateChatInfo: {
      handler(newVal, oldVal) {
        if (newVal[this.targetId]) {
          if (
            newVal[this.targetId][0].messageType !== "RC:RcCmd" &&
            newVal[this.targetId][0].messageType !== "OL:ReadStatus"
          ) {
            this.scrollToBottom();
          }
          if (newVal[this.targetId][0].messageType === "RC:RcCmd") {
            this.chatList = this.chatList.filter(
              (t) =>
                t.messageUId !== newVal[this.targetId][0].content.messageUId
            );
          } else {
            this.chatList = [...this.chatList, ...newVal[this.targetId]];
          }
          this.sendReadTimeMsg(
            this.chatList,
            this.$RongIMLib.ConversationType.PRIVATE,
            this.targetId
          );
          newVal[this.targetId] = null;
        }
        console.log("新值");
        // this.chatList = newVal[this.targetId];
      },
      deep: true,
    },
  },
  created() {
    console.log(this.readTime);
  },
  methods: {
    getTimeDiff,
    getDefaultColor,
    ...mapMutations([
      "SET_SELECT_FRIEND_OPTION",
      "SET_SELECT_CHAT_OPTION",
      "REST_TYPING",
    ]),

    goReward(e) {
      if (!e.content.id) return
      uni.navigateTo({
        url:`/pagesDiscover/reward/RewardDetail?id=${e.content.id}`
      })
    },

    async toFindPosition(obj) {
      let index = this.avatorIsShow.findIndex(
        (o) => obj.messageUId == o.messageUId
      );
      if (index !== -1) {
        this.scrollIntoView = "";
        this.$nextTick(() => {
          this.scrollIntoView = `S-${this.avatorIsShow[index].messageUId}`;
        });
        uni.hideLoading();
      } else {
        uni.showLoading();
        await this.scrollToUpper();
        this.toFindPosition(obj);
      }
    },
    backChat() {
      if (this.backType || getCurrentPages().length < 2) {
        uni.switchTab({
          url: "/pages/chat/Chat",
        });
      } else {
        uni.navigateBack();
      }
    },
    toShowCardMsg(item) {
      if (this.selectShow) return;
      if (!item.groupId) {
        uni.navigateTo({
          url: `/pages/chat/ChatSettings?targetId=${
            item.userId
          }&commentName=${this.formatUserName(item)}`,
        });
      } else {
        uni.navigateTo({
          url: `/pages/chat/moduleSetting?groupId=${
            item.groupId
          }&commentName=${this.formatUserName(
            item
          )}&isGroupChat=1&moduleType=1`,
        });
      }
    },
    onContextmenu(e, item) {
      console.log(e, item);
      // console.log(this.roomBaseInfo)
      if (this.selectShow) return;
      if (Number(item.senderUserId) !== Number(this.userInfo.userId)) {
        item.info = this.roomBaseInfo.info;
      } else {
        item.info = this.userInfo;
      }
      this.currentRightClickInfo = item;
      this.rightclickInfo = {
        x: e.clientX,
        y: e.clientY,
      };
      this.rightMenuShow = true;
    },
    //预览
    showPreview(url) {
      if (this.selectShow) return;
      // uni.previewImage({
      // 	urls: [url],
      // });
      PreviewImage({
        urls: url,
      });
    },

    // app选择文件回调
    onChange: debounce(function (files) {
      const newFiles = [...files.values()];
      console.log("比较", this.awaitSendFile.length, newFiles.length);
      if (this.awaitSendFile.length < newFiles.length) {
        console.log("app选择文件的回调", newFiles);
        const objContent = {
          type: "file",
          name: newFiles[0].name,
          size: newFiles[0].size,
          fileType: "",
        };
        this.setPreRenderMsg(
          objContent,
          this.$RongIMLib.ConversationType.PRIVATE,
          this.targetId,
          ""
        );
        this.awaitSendFile = newFiles;
        this.$refs.lsjUpload[0].upload(newFiles[newFiles.length - 1].name);
      }
    }, 300),
    // 文件上传中的回调
    onProgress(res) {
      console.log("文件上传中", res);
    },

    // 文件上传成功后的回调
    async uploadFilesEnd(res) {
      await this.handleRecallMessage();
      setTimeout(() => {
        console.log("这是文件上传成功后的回调", res, this.awaitSendFile);
        this.$refs.lsjUpload[0].clear(res.name);
        let index = -1;
        const fileNow = this.awaitSendFile.find((t, i) => {
          index = i;
          return t.name == res.name;
        });
        if ((index = -1)) {
          this.awaitSendFile = [];
        } else {
          this.awaitSendFile.splice(index, 1);
        }
        const resData = JSON.parse(res.responseText).data;
        console.log("文件", resData);
        this.handleSendFiles(resData.fileName, resData.url, res.file);
      }, 300);
    },
    // 滚动到顶部
    async scrollToUpper(e) {
      const messageId = this.fillterMessages[0].messageUId;
      const chatList = await getRongHistoryMessages(
        this.targetId,
        this.conversationType,
        this.chatList[0].sentTime
      );
      if (!chatList.length) return;
      this.chatList = chatList.concat([...this.chatList]);
      this.scrollIntoView = "";
      this.$nextTick(() => {
        this.scrollIntoView = `S-${messageId}`;
      });
      // setTimeout(() => {
      //   this.scrollIntoView = `S-${messageId}`;
      //   console.log("lllllllllllll", this.scrollIntoView);
      // }, 10);
    },
    // 自动滚动到底部位置
    scrollToBottom() {
      const arrLength = this.fillterMessages.length - 1;
      const lastMessId = this.fillterMessages[arrLength]?.messageUId;
      this.scrollIntoView = "";
      setTimeout(() => {
        this.scrollIntoView = `S-${lastMessId}`;
        console.log("lllllllllllll", this.scrollIntoView);
      }, 10);
    },
    // 重置数据
    resetState() {
      this.aiteShow = false;
      this.isTopLoading = false;
      this.isFinish = false;
      this.rightMenuShow = false;
      this.isDelete = false;
      this.isLoading = true;
      this.msg = "";
      this.recallBoxShow = false;
      this.selectShow = false;
      this.selectMsgItem = [];
    },
    // 长按录音按钮回调，显示加载框，并不代表马上计时
    startRecord() {
      uni.showLoading();
      // #ifdef H5
      this.$refs.recorderCom.start();
      // #endif

      // #ifdef APP-PLUS
      // recorderManager.start();
      // #endif
    },
    /**
     * 开始录音，初始化计时器
     */
    recorderStart() {
      uni.hideLoading();
      this.duration = 0;
      this.recorderManagerOpen = true;
      this.startTime = moment();
      console.log(this.startTime, "开始录音");
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = undefined;
      }
      this.timer = setInterval(() => {
        this.duration = moment().diff(this.startTime, "seconds");
      }, 100);
      console.log(this.timer, "录音时长");
    },
    //结束录音
    overRecord() {
      this.recorderManagerOpen = false;
      console.log("结束录音");
      const sec = moment().diff(this.startTime, "seconds");
      console.log("录音时间", sec);
      if (sec < 1) {
        this.startTime = moment();
        this.$refs.recorderCom.stop();
        uni.showToast({
          title: this.$t("chat.Record-tips"),
          icon: "error",
        });
        return;
      }

      if (this.timer) {
        clearInterval(this.timer);
        this.timer = undefined;
      }
      // if (this.$store.state.isWebview) {
      //   recorderManager.stop({
      //     format: "mp3",
      //   });
      //   return
      // }

      // #ifdef H5
      this.$refs.recorderCom.stop();
      // #endif
      // #ifdef APP-PLUS
      // recorderManager.stop({
      //   format: "mp3",
      // });
      // #endif
    },
    //发送消息
    async sendMessage(conversation, message, options) {
      // 发送消息
      const res = await this.$RongIMLib.sendMessage(
        conversation,
        message,
        options
      );
      if (res.code === this.$RongIMLib.ErrorCode.SUCCESS) {
        console.log("消息发送成功", res.data);
        if (res.data.messageType == "RC:TxtMsg") {
          this.messageContent = "";
        } else if (res.data.messageType === "OL:Recall") {
          this.recallBoxShow = false;
          this.messageContent = "";
        }
        this.chatList.push(res.data);
        this.$nextTick(() => {
          this.scrollToBottom();
        });
        this.$store.dispatch("upChatList", res.data);
        if (res.data.messageType === "OL:Prerender") {
          this.longTapData = res.data;
          return res.data;
        }
      } else {
        this.sendMsgError(res.code, res.msg, this.targetUserInfo);
        console.log("消息发送失败", res, res.code, res.msg);
      }
    },
    // 长按消息显示操作弹窗
    longTap(index, isMySend, item) {
      if (!this.ifLongtap) return;
      if (this.selectShow) return;
      if (item.messageType == "RC:RcCmd" || item.messageType == "OL:VoiceMsg") {
        return false;
      }
      let dom = uni.createSelectorQuery().in(this);
      // popup-menu 为上面添加的 id 值
      dom.select(`#index${index}`).boundingClientRect();
      dom.exec((data) => {
        // 配置 place、value、x、y 的值
        let isTop = data[0].top >= uni.upx2px(this.popupHeight),
          place = isTop ? "bottom" : "top";
        console.log("长按菜单信息", data[0], this.popupHeight, isTop);
        if (isMySend) {
          this.place = place + "-end";
        } else {
          this.place = place + "-start";
        }

        this.popupShow = !this.popupShow;
        this.x = data[0]["width"] / 2;
        let top = data[0].top + data[0].height / 2;
        let bottom = data[0].bottom - data[0].height / 2;
        this.y = isTop ? top : bottom;
        // this.y =  data[0][isTop ? "top" : "bottom"];
      });
      this.longTapData = item;
      this.currentRightClickInfo = item;
    },
    // 点击长按操作框回调
    tapPopup(e, item) {
      switch (e.type) {
        // 收藏
        case "Collect":
          this.handleAddCollect();
          break;
        // 回复
        case "Reply":
          let info;
          // 判断是否回复自己的信息
          if (item.senderUserId === this.userId) {
            console.log("回复自己的信息");
            info = this.userInfo;
          } else {
            console.log("回复对方的信息");
            info = this.targetUserInfo.userVo;
          }
          this.recallMsgInfo = {
            ...this.longTapData,
            info,
          };
          this.recallBoxShow = true; // 底部回复容器展示
          break;
        // 复制
        case "Copy":
          this.onCopyMsg(item);
          break;
        // 多选
        case "Select":
          this.selectMsgItem = [];
          this.selectMsgHandle(item);
          this.selectShow = true;
          this.stopPlayVoice();
          break;
        // 转发
        case "Forward":
          this.SET_SELECT_CHAT_OPTION({
            info: this.longTapData,
            type: 2,
            isSingle: true,
            tipText: this.$t("share.selectChatTip"),
            title: this.$t("share.selectChat"),
          });
          uni.navigateTo({
            url: "/pages/selectFriend/selectChat",
          });
          break;
        default:
          break;
      }

      console.log("点击右键菜单", e, item);
    },
    // 删除
    handleDelete(e) {
      if (e == 1) {
        this.handleRecallMessage();
      } else if (e == 2) {
        // 删除
        this.handleDeleteMessage();
      }
    },
    //新增收藏信息
    async handleAddCollect() {
      let sendName;
      if (
        Number(this.longTapData.senderUserId) === Number(this.userInfo.userId)
      ) {
        sendName = this.formatUserName(this.userInfo);
      } else {
        sendName = this.formatUserName(this.targetUserInfo);
      }
      const newContent = this.longTapData.expansion
        ? {
            ...this.longTapData.content,
            mediaExpansion:
              this.longTapData.expansion && this.longTapData.expansion.content
                ? this.longTapData.expansion.content
                : null,
          }
        : this.longTapData.content;
      const params = {
        sendUserId: this.longTapData.senderUserId,
        sendName,
        sendTime: this.longTapData.sentTime,
        sendSite: this.longTapData.conversationType,
        sendSiteId: this.longTapData.messageUId,
        context: JSON.stringify(newContent),
        messageType: this.longTapData.messageType,
        targetId: this.longTapData.targetId,
        remark: "",
      };
      const resp = await queryMessageCollectAdd(params);
      if (resp.result.code != 200) return;
      uni.showToast({
        title: this.$t("chat.Collection-success"),
        icon: "none",
      });
    },
    // 点击工具栏回调
    clickToolHandle(item) {
      console.log(item);
      switch (item.type) {
        case "Video":
          videoCallRequest(this.targetId);
          // this.handleUploadVideo();
          break;
        case "Contact":
          this.SET_SELECT_FRIEND_OPTION({
            // 用户列表
            UserList: this.friendsList,
            // 默认选中用户id列表，即不可取消的用户id
            defaultIdList: [],
            type: 4,
            tipText: this.$t("share.contactsTip"),
            title: this.$t("share.selectMyContacts"),
            isSingle: true,
            otherParams: {
              conversationType: this.$RongIMLib.ConversationType.PRIVATE,
              targetId: this.targetId,
            },
          });
          uni.navigateTo({
            url: "/pages/selectFriend/selectFriend",
          });
          break;
        case "Call":
          voiceCallRequest(this.targetId);
          break;
        case "VideoFile":
          this.handleUploadVideo();
          break;
        default:
          break;
      }
    },
    // 点击通话消息的回调
    callMsgHandle(val) {
      if (this.isWebview) {
        if (val.content.endReason !== 1 && val.content.endReason !== 11) {
          return;
        }
        // 1 为音频通话 2 为视频通话
        if (val.content.mediaType == 1) {
          voiceCallRequest(this.targetId);
        } else if (val.content.mediaType == 2) {
          videoCallRequest(this.targetId);
        }
      } else {
        uni.showToast({
          title: this.$t("index.Please-operate-app"),
          duration: 2000,
          icon: "none",
        });
      }
      console.log("点击通话消息的回调", val);
    },
    handleAddEmoji(emoji) {
      this.messageContent = `${this.messageContent}${emoji}`;
    },
    // 获取会话历史
    async getHistoryMessages() {
      if (this.targetId) {
        this.chatList = await getHistoryMessages(
          this.targetId,
          this.conversationType
        );
        this.sendReadTimeMsg(
          this.chatList,
          this.$RongIMLib.ConversationType.PRIVATE,
          this.targetId
        );
        console.log(this.chatList, "会话历史");
        this.$nextTick(() => {
          this.scrollToBottom(); // 滚动到底部
        });
      }
    },
    // 发送消息
    async handleSendMessage() {
      if (this.inputBottomType == "emoji") {
        this.isInputFocus = false;
      }
      if (!this.messageContent) {
        return uni.showToast({
          title: this.$t("chat.Empty-messages-cannot-be-sent"),
          icon: "none",
        });
      }
      const newMessageContent = this.getLinkTextToHtml(this.messageContent);
      this.messageContent = "";
      // 定义消息投送目标会话
      const conversation = {
        conversationType: this.$RongIMLib.ConversationType.PRIVATE,
        targetId: this.targetId,
      };
      // 实例化待发送消息，RongIMLib.TextMessage 为内置文本型消息
      // const message = new this.$RongIMLib.TextMessage({
      //   content: this.messageContent,
      // });
      let message;

      if (this.recallBoxShow) {
        // 实例化待发送消息，RongIMLib.TextMessage 为内置文本型消息
        message = new this.$RongIMLib.RecallMessage({
          content: newMessageContent,
          recallMsg: this.recallMsgInfo,
        });
      } else {
        // 实例化待发送消息，RongIMLib.TextMessage 为内置文本型消息
        message = new this.$RongIMLib.TextMessage({
          content: newMessageContent,
        });
      }
      // 配置属性
      const options = {
        // 重发消息的 messageId, 可以从 onSendBefore 回调返回的 message 对象中 或 返回结果中获取
        messageId: 0,
      };
      this.sendMessage(conversation, message, options);
    },
    handleRecorder() {
      uni.getRecorderManager();
    },
    // // 识别文件类型
    // identifyFileType(data) {
    //   let fileType = "";
    //   let suffix = data.toLocaleLowerCase();
    //   if ("bmp,jpg,jpeg,png,gif,".indexOf(suffix) > -1) {
    //     fileType = "image";
    //   } else if ("xls,xlsx".indexOf(suffix) > -1) {
    //     fileType = "excel";
    //   } else if ("doc,docx".indexOf(suffix) > -1) {
    //     fileType = "word";
    //   } else if ("ppt,pptx".indexOf(suffix) > -1) {
    //     fileTypee = "ppt";
    //   } else if ("pdf".indexOf(suffix) > -1) {
    //     fileType = "pdf";
    //   } else if (".mp3".indexOf(suffix) > -1) {
    //     fileType = "mp3";
    //   } else if (".txt".indexOf(suffix) > -1) {
    //     fileType = "txt";
    //   } else if (".zip".indexOf(suffix) > -1) {
    //     fileType = "zip";
    //   } else if (".mp4".indexOf(suffix) > -1) {
    //     fileType = "mp4";
    //   }
    //   return fileType;
    // },
    /**换算文件大小*/
    getSize(size) {
      if (!size) return "0K";
      var num = 1024.0; //byte
      if (size < num) return size + "B";
      if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + "K"; //kb
      if (size < Math.pow(num, 3))
        return (size / Math.pow(num, 2)).toFixed(2) + "M"; //M
      if (size < Math.pow(num, 4))
        return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
      return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
    },
    //跳转详情页
    handleDetail() {
      uni.navigateTo({
        url: `/pages/chat/ChatSettings?targetId=${this.targetId}&friendId=${
          this.friendId
        }&commentName=${this.formatUserName(
          this.targetUserInfo
        )}&conversationType=${this.conversationType}`,
      });
    },
    // 点击撤回信息
    handleRecallMessage() {
      console.log("撤回的消息", this.longTapData);
      const that = this;
      const extra = {
        latestMessage: {},
      };
      const filterMsg = that.avatorIsShow.filter(
        (item) =>
          item.messageUId !== this.longTapData.messageUId &&
          item.messageType != "OL:ReadStatus" &&
          item.messageType != "RC:RcCmd"
      );
      if (filterMsg.length > 0) {
        extra.latestMessage = filterMsg[filterMsg.length - 1];
      }
      const conversation = {
        conversationType: this.$RongIMLib.ConversationType.PRIVATE,
        targetId: this.targetId, // 用户
      };
      this.$RongIMLib
        .recallMessage(conversation, {
          messageUId: this.longTapData.messageUId,
          sentTime: this.longTapData.sentTime,
          extra,
        })
        .then((res) => {
          if (res.code === 0) {
            console.log(res.code, res.data);
            const index = that.chatList.findIndex(
              (item) => item.messageUId === that.longTapData.messageUId
            );
            that.$set(that.chatList, index, res.data);
            console.log("chatList", that.chatList);
          } else {
            console.log(res.code, res.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 点击撤回信息
    handleRecallPrerenderMessage(newObj) {
      console.log("撤回的消息", newObj);
      const that = this;
      const extra = {
        latestMessage: {},
      };
      const filterMsg = that.avatorIsShow.filter(
        (item) =>
          item.messageUId !== newObj.messageUId &&
          item.messageType != "OL:ReadStatus" &&
          item.messageType != "RC:RcCmd"
      );
      if (filterMsg.length > 0) {
        extra.latestMessage = filterMsg[filterMsg.length - 1];
      }
      const conversation = {
        conversationType: this.$RongIMLib.ConversationType.PRIVATE,
        targetId: this.targetId, // 用户
      };
      this.$RongIMLib
        .recallMessage(conversation, {
          messageUId: newObj.messageUId,
          sentTime: newObj.sentTime,
          extra,
        })
        .then((res) => {
          if (res.code === 0) {
            console.log(res.code, res.data);
            const index = that.chatList.findIndex(
              (item) => item.messageUId === newObj.messageUId
            );
            that.$set(that.chatList, index, res.data);
            console.log("chatList", that.chatList);
          } else {
            console.log(res.code, res.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 点击删除信息
    handleDeleteMessage() {
      const that = this;
      const conversation = {
        conversationType: this.$RongIMLib.ConversationType.PRIVATE,
        targetId: this.targetId,
      };
      this.$RongIMLib
        .deleteMessages(conversation, [
          {
            messageUId: this.longTapData.messageUId,
            sentTime: this.longTapData.sentTime,
            messageDirection: this.$RongIMLib.MessageDirection.SEND,
          },
        ])
        .then((res) => {
          if (res.code === 0) {
            console.log("删除成功");
            const index = that.chatList.findIndex(
              (item) => item.messageUId === that.longTapData.messageUId
            );
            that.chatList.splice(index, 1);
          } else {
            console.log(res.code, res.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 多选删除功能
    onMultipleDelete() {
      const options = [];
      this.selectMsgItem.forEach((item) => {
        options.push({
          messageUId: item.messageUId,
          sentTime: item.sentTime,
          messageDirection: item.messageDirection,
        });
      });

      const that = this;
      const conversation = {
        conversationType: this.$RongIMLib.ConversationType.PRIVATE,
        targetId: this.targetId,
      };
      this.$RongIMLib
        .deleteMessages(conversation, options)
        .then((res) => {
          if (res.code === 0) {
            that.chatList = that.chatList.filter(
              (item) => this.selectMsgIds.indexOf(item.messageUId) === -1
            );
            this.selectShow = false;
            this.selectMsgItem = [];
          } else {
            console.log(res.code, res.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 多选转发功能
    onMultipleForward() {
      this.selectMsgItem.sort((a, b) => {
        return a.sentTime - b.sentTime;
      });
      console.log(this.selectMsgItem, "this.selectMsgItem,");
      this.SET_SELECT_CHAT_OPTION({
        info: this.selectMsgItem,
        type: 3,
        isSingle: true,
        tipText: this.$t("share.selectChatTip"),
        title: this.$t("share.selectChat"),
      });
      uni.navigateTo({
        url: "/pages/selectFriend/selectChat",
      });
    },
    // 获取用户信息
    async _getTargetUserInfo() {
      if (this.conversationType == 1) {
        this.targetUserInfo = await getUserInfo(this.targetId);
        console.log(
          this.targetUserInfo,
          "this.targetUserInfothis.targetUserInfo"
        );
        getTargetUserInfo(this.targetId).then((res) => {
          updateOlUsersInfo(res);
          this.targetUserInfo.userVo = res;
          console.log(
            this.targetUserInfo,
            "getTargetUserInfogetTargetUserInfogetTargetUserInfo"
          );
        });
        console.log("targetUserInfo", this.targetUserInfo);
      } else if (this.conversationType == 6) {
        this.targetUserInfo = {
          commentLast: this.$t("chat.Service-Messages"),
          avatarCompress: require("@/static/image/chat/system.png"),
          moduleType: 0,
        };
      }
    },
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    //读取获取之后的信息
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      console.log(lists, "图片对象");
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise("", lists[i].url, "");
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    //上传视频
    async handleUploadVideo() {
      console.log("上传视频");
      uni.chooseVideo({
        maxDuration: 60,
        count: 1,
        sourceType: ["camera", "album"],
        success: async (res) => {
          console.log(res.tempFilePath);
          const type = 1;
          await this.uploadFilePromise(type, res.tempFilePath, "");
        },
      });
    },
    //上传文件
    handleUploadFile() {
      uni.chooseFile({
        count: 1,
        success: async (res) => {
          console.log(res.tempFilePaths[0], "文件信息");
          const type = 2;
          await this.uploadFilePromise(
            type,
            res.tempFilePaths[0],
            res.tempFiles[0]
          );
        },
      });
    },
    //上传路径
    async uploadFilePromise(type, url, tempFiles, sec) {
      let recallObj = {};
      if (!type || type == 1) {
        const objContent = {
          type: !type ? "img" : "video",
          name: "",
          size: "",
          fileType: "",
        };
        recallObj = await this.setPreRenderMsg(
          objContent,
          this.$RongIMLib.ConversationType.PRIVATE,
          this.targetId,
          ""
        );
      }
      return new Promise((resolve, reject) => {
        console.log("H5发语音进来了", url);
        let a = uni.uploadFile({
          url: config.server + "/app/oss/upload", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          header: {
            Authorization: `Bearer ${store.state.token}`,
            version: config.version,
          },
          formData: {
            user: "upload",
          },
          success: (res) => {
            if (!type || type == 1) {
              this.handleRecallPrerenderMessage(recallObj);
              setTimeout(() => {
                if (!type) {
                  this.handleSendImage(resp.data.compressImage, resp.data.url);
                } else if (type == 1) {
                  this.handleSendVideo(
                    resp.data.oneUrl,
                    resp.data.url,
                    resp.data.fileName
                  );
                }
              }, 300);
            }
            const resp = JSON.parse(res.data);
            console.log("回调", resp.data);
            if (resp.code == 200) {
              setTimeout(() => {
                if (!type) {
                  // this.handleRecallMessage()
                  // this.handleSendImage(resp.data.compressImage, resp.data.url);
                } else if (type == 1) {
                  // this.handleSendVideo(
                  //   resp.data.oneUrl,
                  //   resp.data.url,
                  //   resp.data.fileName
                  // );
                } else if (type == 2) {
                  this.handleSendRemote(resp.data.url, sec);
                }
              }, 1000);
            }
          },
          fail: (e) => {
            console.log("失败的回调", e);
          },
        });
      });
    },
    // 发送图片消息
    async handleSendImage(content, imageUri) {
      if (!content) {
        return uni.showToast({
          title: this.$t("chat.Empty-messages-cannot-be-sent"),
          icon: "none",
        });
      }
      // 定义消息投送目标会话
      const conversation = {
        conversationType: this.$RongIMLib.ConversationType.PRIVATE,
        targetId: this.targetId,
      };
      // 实例化待发送消息，RongIMLib.ImageMessage 为内置图片型消息
      const message = new this.$RongIMLib.ImageMessage({
        content: content, // 图片缩略图，应为 Base64 字符串，且不可超过 80KB
        imageUri: imageUri, // 图片的远程访问地址
      });
      // 配置属性
      const options = {
        messageId: 0,
      };
      this.sendMessage(conversation, message, options);
    },
    // 发送视频消息
    async handleSendVideo(content, imageUri, fileName) {
      if (!content) {
        return uni.showToast({
          title: this.$t("chat.Empty-messages-cannot-be-sent"),
          icon: "none",
        });
      }
      // 定义消息投送目标会话
      const conversation = {
        conversationType: this.$RongIMLib.ConversationType.PRIVATE,
        targetId: this.targetId,
      };
      const message = new this.$RongIMLib.SightMessage({
        sightUrl: imageUri, //"<视频资源的远程地址>",
        content: content, //"<缩略图base64>",
        duration: 10,
        size: 100,
        name: fileName,
      });
      // 配置属性
      const options = {
        messageId: 0,
      };
      this.sendMessage(conversation, message, options);
    },
    // 发送文件消息
    async handleSendFiles(fileName, imageUri, tempFiles) {
      if (!imageUri) {
        return uni.showToast({
          title: this.$t("chat.Empty-messages-cannot-be-sent"),
          icon: "none",
        });
      }
      // 定义消息投送目标会话
      const conversation = {
        conversationType: this.$RongIMLib.ConversationType.PRIVATE,
        targetId: this.targetId,
      };
      const message = new this.$RongIMLib.FileMessage({
        name: fileName,
        size: tempFiles.size,
        type: tempFiles.type,
        fileUrl: imageUri,
      });
      // 配置属性
      const options = {
        messageId: 0,
      };
      this.sendMessage(conversation, message, options);
    },

    // 发送语音消息
    async handleSendRemote(remoteUrl, sec) {
      if (!remoteUrl) {
        return uni.showToast({
          title: this.$t("chat.Empty-messages-cannot-be-sent"),
          icon: "none",
        });
      }
      // 定义消息投送目标会话
      const conversation = {
        conversationType: this.$RongIMLib.ConversationType.PRIVATE,
        targetId: this.targetId,
      };
      // 实例化待发送消息，RongIMLib.ImageMessage 为内置图片型消息
      const message = new this.$RongIMLib.HQVoiceMessage({
        remoteUrl: remoteUrl, // 图片的远程访问地址
        duration: sec || moment().diff(this.startTime, "seconds"), //时长
      });
      // 配置属性
      const options = {
        // 重发消息的 messageId, 可以从 onSendBefore 回调返回的 message 对象中 或 返回结果中获取
        messageId: 0,
      };
      console.log(conversation, message, options, "fasms");
      this.sendMessage(conversation, message, options);
    },
    handleVioceOver() {
      /**监听语音结束*/
      recorderManager.onStop(async (res) => {
        const sec = moment().diff(this.startTime, "seconds");
        if (+sec < 1) {
          return uni.showToast({
            title: this.$t("chat.Record-tips"),
            icon: "error",
          });
        }
        console.log("监听语音结束");
        this.voicePath = res.tempFilePath;
        let a = uni.uploadFile({
          url: config.server + "/app/oss/upload", // 仅为示例，非真实的接口地址
          filePath: res.tempFilePath,
          name: "file",
          header: {
            Authorization: `Bearer ${store.state.token}`,
            version: config.version,
          },
          formData: {
            user: "test",
          },
          success: (res) => {
            const resp = JSON.parse(res.data);
            console.log("回调", res, resp);
            if (resp.code == 200) {
              setTimeout(() => {
                this.handleSendRemote(resp.data.url);
              }, 1000);
            }
          },
        });
      });
    },
    // //播放语音
    // playVoice(url, duration, id) {
    // 	if (this.selectShow) return
    // 	console.log("播放语音", duration);
    // 	if (this.audio) {
    // 		this.audio.destroy();
    // 	}
    // 	this.bofang = id;
    // 	this.audio = uni.createInnerAudioContext();
    // 	this.audio.autoplay = true;
    // 	this.audio.src = url; //音频地址
    // 	this.audio.play(); //执行播放
    // 	this.audio.onPause(() => {
    // 		this.audio.destroy();
    // 		this.audio = undefined;
    // 		this.bofang = "";
    // 	});
    // },
    // //暂停播放
    // playStop() {
    // 	this.audio.pause();
    // 	this.bofang = "";
    // },
    //查看文件
    handleSeeFiles(item) {
      if (this.selectShow) return;
      console.log("查看文件");
      if (this.$store.state.isWebview) {
        downloadWebViewFlie(item.content.fileUrl, item.content.name);
        return;
      }
      uni.openDocument({
        filePath: item.content.fileUrl,
        success: (res) => {
          console.log("成功打开");
        },
        fail: (fail) => {
          uni.showToast({
            title: this.$t("chat.File-tips"),
            duration: 2000,
            icon: "none",
          });
          console.log("打开失败");
        },
      });
    },
  },
  onShow() {
    if (this.connectStatus !== 2) return;
    this.getHistoryMessages(); // 获取会话历史
    // clearMessageUnreadStatus(this.targetId, this.conversationType);
    if (this.targetUserInfo && Object.keys(this.targetUserInfo).length !== 0) {
      this._getTargetUserInfo(); // 获取用户信息
    }
  },
  onLoad(option) {
    this.REST_TYPING();
    setTimeout(() => {
      this.WindowInfo = uni.getWindowInfo();
    }, 100);
    this.targetId = option.targetId;
    this.friendId = option.friendId;
    this.conversationType = option.conversationType || 1;
    this.commentName = option.commentName;
    this.backType = Number(option.backType || 0);
    this._getTargetUserInfo(); // 获取用户信息
    this.handleVioceOver();
    uni.onKeyboardHeightChange((res) => {
      // 监听软键盘的高度，页面隐藏后一定要取消监听键盘
      this.keyHeight = res.height;
      this.inputBottomType = "none";
    });
  },
  onUnload() {
    this.stopPlayVoice();
    uni.offKeyboardHeightChange((res) => {});
    clearMessageUnreadStatus(this.targetId, this.conversationType);
    if (this.audio) {
      this.audio.destroy();
      this.bofang = "";
    }

    const previewImageDom = document.getElementById("PreviewImage-mask");
    if (previewImageDom) {
      previewImageDom.remove();
    }
  },
};
</script>

<style lang="scss" scoped>
.s-card {
  width: 100%;
  border-bottom: 2rpx solid rgba(255, 255, 255, 0.05);
  padding-bottom: 20rpx;
  .text_1 {
    font-size: 30rpx;
  }
  .text_2 {
    font-size: 26rpx;
    margin-top: 16rpx;
  }
}
.error-color {
  color: #fe6600 !important;
}

::v-deep .a-link {
  font-size: 28upx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #1765da;
  text-decoration: none;
}

.placeholderClass {
  font-size: 26upx;
  color: #878787;
  // padding: 20rpx 0;
  // box-sizing: border-box;
}

.video-bg {
  width: 100%;
  height: fit-content;
  background: #191a19;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.omit {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 24rpx;
}

.time-msg {
  font-size: 20rpx !important;
  font-weight: 400 !important;
  display: flex;
  align-items: center;
  font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;

  .right-icon {
    width: 24rpx;
    height: 24rpx;
    margin-left: 4rpx;
  }
}

.time-voice {
  margin-left: 20rpx;
  color: rgba(135, 135, 135, 0.6);
}

.time-pic {
  height: 30rpx;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 36rpx;
  line-height: 30rpx;
  padding: 0rpx 10rpx;
  color: #ffffff;
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
}

.time-file {
  display: block;
  color: rgba(135, 135, 135, 0.6);
  float: right;
  line-height: 28rpx;
  padding: 10rpx 0;
  padding-left: 20rpx;
}

.time-recall {
  display: block;
  float: right;
  color: rgba(135, 135, 135, 0.6);
}

.time-text-file {
  color: rgba(135, 135, 135, 0.6);
  padding: 10rpx 0rpx;
  padding-right: 20rpx;
  justify-content: flex-end;
}

.time-text-file_2 {
  color: rgba(135, 135, 135, 0.6);
  text-align: right;
  line-height: 28rpx;
  padding: 10rpx 0rpx;
  justify-content: flex-end;
}

.time-card {
  display: inline-block;
  float: right;
  color: rgba(135, 135, 135, 0.6);
}

.wrapper {
  width: 100%;
  height: 100vh;
  background: #e9edec;
  display: flex;
  flex-direction: column;

  .header-box {
    .u-center-slot {
      width: 80%;
      margin: 0rpx 10%;

      .nav-title {
        font-size: 32upx;
        font-weight: 500;
        color: #000000;
        line-height: 48upx;
        text-align: center;
      }

      .nav-status {
        margin-top: 6upx;
        margin-left: 12upx;
        font-size: 24upx;
        font-weight: 400;
        color: #1bc922;
        position: relative;
        text-align: center;
        // line-height: 1em;

        &::before {
          content: "";
          position: absolute;
          width: 8upx;
          height: 8upx;
          background: #1bc922;
          border-radius: 50%;
          top: 50%;
          transform: translateY(-50%);
          margin-left: -12upx;
        }
      }

      .nav-system {
        margin-top: 6upx;
        margin-left: 12upx;
        font-size: 24upx;
        font-weight: 400;
        color: #878787;
        position: relative;
        text-align: center;
        // line-height: 1em;
      }
    }
  }

  .chat-box {
    width: 100%;
    flex: 1;
    overflow: scroll;
    background: #e9edec;
    box-sizing: border-box;
    padding: 0rpx 30rpx 0;
    // padding-top: calc(var(--status-bar-height) + 120rpx);

    .char-time {
      font-size: 24rpx;
      font-family: Inter-Regular, Inter;
      font-weight: 400;
      color: #606665;
      // -webkit-background-clip: text;
      text-align: center;
      margin-top: 30upx;
    }

    .char-hour {
      font-size: 24rpx;
      font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
      font-weight: 400;
      color: rgba(135, 135, 135, 0.3);
      line-height: 36rpx;
      margin: 10rpx 104rpx 0;
    }

    .read-icon,
    .icon-yifasong {
      font-size: 24rpx;
      font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
      font-weight: 400;
      margin-left: 12rpx;
    }

    .char-hour-right {
      text-align: right;
    }

    .char-hour-success {
      color: #61bdb2;
    }

    .char-hour-error {
      color: #fe6600;
    }

    .send-success-state {
      display: inline-block;
      margin-left: 4rpx;
    }

    .send-error-state {
      flex-flow: row-reverse;
    }

    .chat-line {
      width: 100%;
      display: flex;
      padding-bottom: 30upx;

      .my-select-icon {
        display: inline-block;
        display: flex;
        margin-right: 30rpx;
        align-items: center;
        align-items: end;
        margin-bottom: 18rpx;

        .unselect-icon {
          display: inline-block;
          width: 44rpx;
          height: 44rpx;
          border: 2rpx solid rgba(0, 0, 0, 0.2);
          box-sizing: border-box;
          background: #ffffff;
          border-radius: 50%;
          cursor: pointer;
        }

        .select-icon {
          font-size: 44rpx;
          color: #61bdb2;
          vertical-align: top;
        }
      }

      &.chat-right {
        justify-content: flex-end;

        .time-msg {
          display: block;
          color: rgba(255, 255, 255, 0.8);

          .right-icon {
            width: 24rpx;
            height: 24rpx;
            margin-left: 4rpx;
          }
        }

        .time-voice {
          margin-left: 20rpx;
          line-height: 28rpx;
          margin-top: 10rpx;
        }

        .time-pic {
          height: 40rpx;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 40rpx;
          line-height: 40rpx;
          padding: 0rpx 10rpx;
          color: #ffffff;
          position: absolute;
          right: 20rpx;
          bottom: 20rpx;
          font-size: 20rpx;
        }

        .time-file {
          display: block;
          float: right;
          line-height: 28rpx;
          padding-top: 8rpx;
          padding-left: 20rpx;
        }

        .time-recall {
          display: block;
          float: right;
        }

        .time-text-file {
          padding: 0;
          padding-bottom: 10rpx;
          padding-right: 20rpx;
          text-align: right;
        }

        .time-text-file_2 {
          text-align: right;
          line-height: 28rpx;
          padding: 0;
        }

        .time-card {
          display: inline-block;
          float: right;
        }

        .my-select-icon {
          margin-right: auto;
        }
      }

      &__container {
        &__name {
          margin: 0 0 10rpx 24rpx;
          font-size: 12rpx;
          color: #878787;
          display: flex;
          align-items: center;
        }
      }

      .avatar {
        flex-shrink: 0;
        width: 80upx;
        height: 80upx;
        border-radius: 50%;
        line-height: 80rpx;
        text-align: center;
        font-size: 30rpx;
        font-weight: 400;
        color: #fff;
      }

      .connect-block-left {
        background: #ffffff;
        border-radius: 0px 20rpx 20rpx 20rpx;
        font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
        box-sizing: border-box;
        padding: 20upx 30upx;
        margin: 0 104upx 0 24upx;
        font-size: 28upx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.8);
        line-height: 44upx;
        word-wrap: break-word;
        white-space: pre-wrap;
        word-break: break-word;
        width: fit-content;
        overflow: hidden;
      }

      .connect-block-right {
        overflow: hidden;
        border-radius: 20rpx 0px 20rpx 20rpx;
        background: #61bdb2;
        box-sizing: border-box;
        padding: 20upx 30upx;
        margin: 0 24upx 0 104upx;
        font-size: 28upx;
        font-weight: 400;
        color: #ffffff;
        line-height: 44upx;
        word-break: break-word; // 强制换行
      }

      .char-pic {
        width: 300rpx;
        height: 300rpx;
        border-radius: 20rpx 0px 20rpx 20rpx;
        opacity: 1;
        border: 2rpx solid #ffffff;
        margin: 0 24rpx;
        position: relative;
      }

      .char-pic-left {
        border-radius: 0px 20rpx 20rpx 20rpx;
      }

      .chart-call {
        display: flex;
        align-items: center;
        // white-space: nowrap;
        padding: 20rpx;

        .call-my-icon {
          font-size: 48rpx;
          margin-right: 8rpx;
        }
      }

      .chart-voice {
        position: relative;
        display: flex;
        align-items: center;
        white-space: nowrap;
        padding: 20rpx;
        line-height: 48upx;

        .progress-background {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          border-radius: 20rpx 0px 0px 20rpx;
          background-color: #e6f5f3;
          transition: width linear 0.3s;
        }

        .video-back-box {
          display: inherit;
          background-color: #fff;
          z-index: 10;
          border-radius: 50%;
          box-shadow: 0px 0px 16rpx 0px rgba(75, 145, 250, 0.3);
        }

        .voice-icon {
          z-index: 10;
          font-size: 48rpx;
        }

        .voice-icon-shadow {
          box-shadow: 0px 0px 16px 0px rgba(62, 165, 152, 0.5);
        }

        .progress-icon {
          z-index: 10;
          font-size: 32rpx;
          margin: 0 20rpx;
        }

        text {
          z-index: 10;
          font-size: 28rpx;
          font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
          font-weight: 400;
          line-height: 40rpx;
        }
      }

      .chart-voice-left {
        background-color: #ffffff;
        color: #4b91fa;

        .progress-background {
          background-color: #edf4ff;
          border-radius: 0rpx 0px 0px 20rpx;
        }
      }

      .video-duration_top {
        position: absolute;
        left: 20rpx;
        top: 20rpx;
        font-size: 20rpx;
        font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
        font-weight: 400;
        color: #ffffff;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 36rpx;
        padding: 8rpx 12rpx;

        .video-icon {
          width: 16rpx;
          height: 18rpx;
          margin-left: 8rpx;
        }
      }

      .file-left {
        color: #4b91fa;
      }

      .file-type-cicle {
        position: relative;
        display: flex;

        .file-type-image {
          width: 116rpx;
          height: 116rpx;
        }

        .file-type-keyword {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-weight: 700;
        }
      }

      .chart-file-container {
        max-width: 254rpx;
        font-size: 28rpx;
        font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
        font-weight: 400;
        line-height: 40rpx;
        margin-left: 20rpx;
      }

      .file-content {
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        white-space: break-spaces;
      }

      .file-size {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.3);
        line-height: 36rpx;
      }

      .file-size-left {
        color: rgba(135, 135, 135, 0.3);
      }

      .chart-transfer {
        width: 430rpx;
        background: #f79e6d;
        border-radius: 20rpx 0px 20rpx 20rpx;
        margin: 0 20rpx;
        color: #fff;

        &__top {
          display: flex;
          padding: 24rpx 0;
          margin: 0 20rpx;
          border-bottom: 2rpx solid rgba(255, 255, 255, 0.05);

          .my-icon {
            font-size: 80rpx;
          }

          &__container {
            margin-left: 20rpx;

            & > view:first-child {
              font-size: 36rpx;
              font-weight: 600;
              line-height: 52rpx;
            }

            & > view:last-child {
              font-size: 24rpx;
              color: rgba(255, 255, 255, 0.6);
              line-height: 36rpx;
            }
          }
        }

        &__bottom {
          font-size: 24rpx;
          font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.3);
          line-height: 36rpx;
          padding: 10rpx 20rpx;
        }
      }

      .chart-transfer-left {
        border-radius: 0rpx 20rpx 20rpx 20rpx;
      }
    }
  }

  .recall-message {
    width: 100%;
    text-align: center;
    font-size: 28upx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 44upx;
  }

  .msgs-classic {
    min-width: 430upx;
    text-align: left;
    overflow: hidden;
    display: inline-block;
    padding: 0rpx 20rpx;
    background: #61bdb2;
    color: #ffffff;
    white-space: pre-line;
    word-break: break-word;
    background-blend-mode: multiply;
    box-sizing: border-box;
    border-radius: 20rpx 0rpx 20rpx 20rpx;
    margin: 0 24upx 0 104upx;
    overflow: hidden;
  }

  .card-left {
    margin: 0 104upx 0 24upx !important;
    background: #ffffff !important;
    border-radius: 0rpx 20rpx 20rpx 20rpx !important;
    color: #000000;
  }

  .card-box {
    padding-bottom: 0 !important;
    padding-top: 20rpx;

    .card-content {
      width: 100%;
      border-bottom: 2rpx solid rgba(255, 255, 255, 0.05);
      padding-bottom: 20rpx;
      display: flex;
      align-items: center;

      .card-img {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 20rpx;
      }

      .card-name {
        flex: 1;
        font-size: 28rpx;
        font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
        font-weight: 400;
        color: #ffffff;
        line-height: 40rpx;
      }
    }

    .card-bottom {
      font-size: 24rpx;
      font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.3);
      line-height: 36rpx;
      padding: 10rpx 0;
    }
  }

  .bottom-box {
    z-index: 11;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 0 10upx 0 rgba(204, 0, 51, 0.1);

    .disabled-mask {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      z-index: 99;
      background: rgba(0, 0, 0, 0.1);
    }

    .input-line {
      position: relative;
      box-sizing: border-box;
      padding: 18upx 30upx;
      display: flex;
      align-items: center;

      .bottom-icon {
        font-size: 60rpx;
        width: 64rpx;
        height: 64rpx;
      }

      .send-icon {
        width: 64rpx;
        height: 64rpx;
      }

      .emoji-icon-ab {
        position: absolute;
        right: 120rpx;
        z-index: 99;
      }

      .message-input {
        flex: 1;
        overflow: auto;
        min-height: 36upx;
        max-height: 200rpx;
        background: #f6f6f6;
        border-radius: 38upx;
        font-size: 28upx;
        font-weight: 400;
        color: #000000;
        box-sizing: border-box;
        padding: 20rpx 86rpx 20rpx 40rpx;
      }

      .record-box {
        line-height: 76upx;
        text-align: center;
      }

      .margin-left {
        margin-left: 24upx;
      }
    }

    .input-tools {
      display: flex;
      flex-flow: row wrap;
      padding: 20rpx 30rpx 10rpx;

      &__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 33%;

        &__top {
          box-sizing: border-box;
          width: 120rpx;
          height: 120rpx;
          text-align: center;
          line-height: 120rpx;
          background: #f6f6f6;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          margin: 0 auto;

          .tool-icon {
            font-size: 58rpx;
            color: #606665;
          }
        }

        &__bottom {
          margin: 10rpx 0 30rpx;
          font-size: 28rpx;
          font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
          font-weight: 400;
          color: #606665;
          line-height: 40rpx;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          min-width: 120rpx;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

.ml-10 {
  margin-left: 10rpx;
}

.mr-l0 {
  margin-right: 10rpx;
}

.record-content {
  width: 480rpx;
  height: 130rpx;
  background: #ffffff;
  border-radius: 30rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all 0.1s;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}

.record-content::after {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  border: 30rpx solid white;
  border-top-color: white;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  top: 130rpx;
}

.seconds {
  width: 368rpx;
  height: 24rpx;
  background-image: url("../../static/image/in_voice.png");
  background-size: 368rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ff5551;
}

.play-right {
  width: 48upx;
  height: 48upx;
}

/deep/ .uni-input-input {
  word-break: break-all;
  width: 90%;
}
</style>
